<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .box {
        margin: 0 auto;
        width: 200px;
        font-size: 1rem;
      }

      /* 未访问（如访问过需清浏览器访问记录） */
      a:link {
        color: rgb(240, 240, 57);
      }

      /* 访问过（之前点击过链接时） */
      a:visited {
        color: #437a16;
      }

      /* 选中（点击跳转后停留时） */
      a:focus {
        color: #b131a6;
      }

      /* 悬停（鼠标经过时） */
      a:hover {
        font-size: 1.2rem;
        color: black;
      }

      /* 激活时（鼠标按下时） */
      a:active {
        background: #265301;
        color: #cdfeaa;
      }

      /* 设置链接图标 */
      a[href*="http"] {
        background: url("./icons/link.svg") no-repeat 100% 0;
        background-size: 16px 16px;
        background-position: right;
        padding-right: 19px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="http://www.baidu.com" target="_blank"> 这是一个链接 </a>
    </div>
  </body>
</html>
